<template>
	<view>
		<!--基础信息-->
		<view class="btName">基础信息</view>
		<view class="flex-white-plr26 ptb10 mt32 bdb_f5">
			<text class="mr26">姓名
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="name" placeholder="请在此输入姓名" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">联系方式
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="mobile" placeholder="请在此输入联系方式" />
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">性别</text>
			<u-radio-group v-model="gender" @change="radioGroupChange">
				<u-radio v-for="(item, index) in radioList" :key="item.value" :name="item.value" :disabled="item.disabled">
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>
		<view @click="pickerShowFun('生日')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">生日</text>
			<view :class="birthday ? '' : 'cBlack'">
				{{birthday ? birthday : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
<!-- 		<view @click="pickerShowFun('地区')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">地区</text> -->
			<!-- <view class="width276" :class="region ? 'cBlack' : ''">{{region ? region : '请选择'}}</view> -->
<!-- 			<view :class="region ? '' : 'cBlack'">{{region ? region : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="chooseAddrFun">
			<text class="mr26">地址</text>
			<u-input v-model="address" placeholder="请在输入此通信地址" />
		</view>
<!-- 		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">亲密度</text>
			<u-rate :count="5" v-model="qmdNum" active-color="#ffaa00" size="36"></u-rate>
		</view>
		<view class="flex-white-plr26 ptb20">
			<text class="mr26">重要程度</text>
			<u-rate :count="5" v-model="zycdNum" active-color="#ffaa00" size="36"></u-rate>
		</view> -->
		<!--企业信息-->
		<view class="btName">关联客户信息</view>
		<view class="flex-white-plr26 ptb20 mt32 bdb_f5" @click="selectKehuFun">
			<text class="mr26">关联客户
				<text class="redXingh">*</text>
			</text>
			<view :class="customer_name ? '' : 'cBlack'">
				{{customer_name ? customer_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">部门</text>
			<u-input v-model="department" placeholder="请在此输入部门" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">职位</text>
			<u-input v-model="postion" placeholder="请在此输入职位" />
		</view>
		<u-picker :params="pickerParams" :safe-area-inset-bottom="true" end-year="2100" v-model="pickerShow"
			@confirm="pickerConfirmFun" :mode="pickerMode" :default-time="birthday"></u-picker>
		<!--其他信息-->
		<view class="btName">其他信息</view>
		<view class="flex-white-plr26 ptb10 mt32 bdb_f5">
			<text class="mr26">微信</text>
			<u-input v-model="weixin" placeholder="请在此输入微信号" />
		</view>
		<view class="flex-white-plr26 ptb10">
			<text class="mr26">邮箱</text>
			<u-input v-model="email" placeholder="请在此输入邮箱" />
		</view>
		<view class="flex-white-plr26 ptb20 mt32">
			<u-input v-model="remark" placeholder="备注" maxlength="500" placeholderStyle="color: #303133;"
				type="textarea" />
		</view>
		<!--提交按钮-->
		<view class="submitView">
			<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#909399" @click="submitBtnFun">
				{{pageType ? '保存' : '提交'}}</u-button>
		</view>
	</view>
</template>

<script>
	let that = '';
	import {
		apiLinkman
	} from '@/api/crm.js'
	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, #007aff, rgb(12, 168, 234))'
				},
				name: '',
				mobile: '',
				customer_name: '',
				customer_id: '',
				position: '',
				weixin: '',
				email: '',
				radioList: [{
						name: '男',
						value:'1'
					},
					{
						name: '女',
						value:'2'
					}
				],
				gender: '1',
				birthday: '',
				region: '',
				zycdNum: 0,
				qmdNum: 0,
				department: '',
				postion: '',
				remark: '',
				pickerParams: {},
				pickerShow: false,
				pickerMode: 'time',
				province: '',
				city: '',
				area: '',
				address: '',
				latitude: 0,
				longitude: 0,
				pageType: '',
				navbarTitle: '新建联系人',
				xgInfoObj: {},
				create_user_id: uni.$userInfo.id,
				cardIndex:'',
				isAdd: 0
			}
		},
		onLoad(e) {
			that = this;
			that.cardIndex = e.index || '';
			if (e.type == 'update') {
				that.setDataFun();//加载数据
				that.pageType = 'update';
				that.navbarTitle = '修改联系人信息';
				uni.setNavigationBarTitle({
					title: '修改联系人信息'
				})
			}
			if (e.customer_name) {
				that.customer_name = e.customer_name;
			}
			if (e.customer_id) {
				that.customer_id = e.customer_id;
			}
			if (e.isAdd) {
				that.isAdd = e.isAdd;
			}
			uni.$on('kehuBindFun', that.kehuBindFun)
		},
		onBackPress() {
			uni.$off('kehuBindFun', that.kehuBindFun)
		},
		methods: {
			// 单选框
			radioGroupChange(e) {
				console.log(e);
				that.gender = e;
			},
			// 展示选择器
			pickerShowFun: function(str) {
				if (str == '生日') {
					that.pickerMode = 'time';
					that.pickerParams = {
						year: true,
						month: true,
						day: true
					};
				} else {
					that.pickerMode = 'region';
					that.pickerParams = {
						province: true,
						city: true,
						area: true
					};
				}
				that.pickerShow = true;
			},
			// 点击确定按钮，返回当前选择的值
			pickerConfirmFun: function(e) {
				if (that.pickerMode == 'time') {
					that.birthday = e.year + '-' + e.month + '-' + e.day
				} else {
					that.province = e.province.label;
					that.city = e.city.label;
					that.area = e.area.label;
					that.region = that.province + ' ' + that.city + ' ' + that.area;
				}
			},
			// 选择定位地点
			chooseAddrFun: function() {
				uni.chooseLocation({
					success: function(res) {
						that.address = res.address;
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					}
				});
			},
			// 提交按钮，新增联系人方法
			submitBtnFun: function() {
				if (!that.name) {
					uni.$myModalFun('联系人姓名不能为空，请输入！')
					return
				}
				if (!that.mobile) {
					uni.$myModalFun('联系方式不能为空，请输入！')
					return
				}
				if (!that.customer_id) {
					uni.$myModalFun('联系人所属客户不能为空，请选择！')
					return
				}
				
				//请求参数
				let reqObj = {
					req: {
						name: that.name,
						mobile: that.mobile,
						gender: that.gender,
						address: that.address,
						customer_name: that.customer_name,
						customer_id: that.customer_id,
						department: that.department,
						postion: that.postion,
						weixin: that.weixin,
						email: that.email,
						remark: that.remark,
						create_user_id: that.create_user_id,
						
						// birthday: that.birthday,
						// region: that.region,
						// latitude: that.latitude,
						// longitude: that.longitude,
						
					}
				}
				
				//默认为添加动作
				let action = 'add';
				if (that.pageType == 'update') {
					action = 'update'
					reqObj.req.id = that.xgInfoObj.id;
					uni.showLoading({
						title: '修改中...'
					})
				} else {
					uni.showLoading({
						title: '提交中...'
					})
				}
				let reqData = {
					action: action,
					params: reqObj
				}
				apiLinkman(reqData)
					.then(res => {
						if (action == 'update') {
							uni.showToast({
								title: '联系人修改成功',
								icon: 'none',
								duration: 888,
								mask: true
							})
							uni.$lxrInfo = reqObj.req;
							
							//更新列表
							if(that.cardIndex!=''){
								uni.$emit('updateListByIndex', { index: that.cardIndex, obj: reqObj.req});
							}
							
							setTimeout(() => {
								uni.navigateBack()
							}, 888)
						} else {
							uni.showToast({
								title: '联系人新增成功',
								icon: 'none',
								duration: 888,
								mask: true
							})
							let addObj = reqObj.req;
							addObj.id = res.data.data;//新增加的后的ID
							if (that.isAdd) {
								uni.$emit('addItemInListFun', addObj)
							}
							
							uni.$lxrInfo = addObj;
							
							setTimeout(() => {
								uni.redirectTo({
									url: './detail?index=0&id='+addObj.id
								});
							}, 188)
						}
					})
			},
			// 选择所属客户
			selectKehuFun: function() {
				uni.navigateTo({
					url: '../cst_customer/show?type=linkman'
				})
			},
			// 绑定客户
			kehuBindFun: function(e) {
				that.customer_id = e.customer_id;
				that.customer_name = e.customer_name;
			},
			// 初始化修改数据
			setDataFun: function() {
				let obj = uni.$lxrInfo
				that.xgInfoObj = uni.$lxrInfo
				that.name = obj.name
				that.mobile = obj.mobile
				that.gender = obj.gender
				// that.birthday = obj.birthday
				// that.region = obj.region
				that.address = obj.address
				// that.latitude = obj.latitude
				// that.longitude = obj.longitude
				// that.qmdNum = obj.qmdNum
				// that.zycdNum = obj.zycdNum
				that.customer_name = obj.customer_name
				that.customer_id = obj.customer_id
				that.department = obj.department
				that.postion = obj.postion
				that.weixin = obj.weixin
				that.email = obj.email
				that.remark = obj.remark
				// let regionArr = (obj.region).split(" ")
				// that.province = regionArr[0]
				// that.city = regionArr[1]
				// that.area = regionArr[2]
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 260rpx;
	}

	.u-radio {
		width: 200rpx !important;
	}
</style>
